<template>
  <div class="app-container">
    <template>
      <div class="filter-container">
        <el-form :inline="true" :model="filterForm" class="demo-form-inline">
          <el-form-item>
            <el-input @input="search" v-model="filterForm.key" placeholder="ISBN或书名"></el-input>
          </el-form-item>
          <slot name="append" />
          <el-form-item>
            <el-button
              class="filter-item"
              type="success"
              icon="el-icon-refresh"
              @click="handleRefresh"
            >刷新</el-button>
          </el-form-item>
          <el-form-item>
            <el-upload
              :action="uploadUrl"
              :headers="uploadHeader"
              accept=".csv"
              :on-success="handleFileSuccess"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <el-table :data="list" v-loading="listLoading" highlight-current-row border>
      <slot name="prepend" />
      <el-table-column type="index" width="50" align="center" />
      <el-table-column
        v-for="item in dataConfig"
        :key="item.prop"
        v-bind="item"
        :align="item.align || 'center'"
      >
        <template slot-scope="scope">
          <slot
            v-if="item.prop == 'supplier'"
            :scope="scope"
            :name="item.prop"
          >{{ scope.row.supplier.name }}</slot>
          <slot v-else :scope="scope" :name="item.prop">{{ scope.row[item.prop] }}</slot>
        </template>
      </el-table-column>
      <slot name="prepend" />
      <el-table-column :width="160" :label="commonTitle('actions')" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleOrder(scope.$index, scope.row)">订购</el-button>
          <slot :scope="scope" name="moreButton" />
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="pagination.page"
      :limit.sync="pagination.size"
      @pagination="getList"
    />

    <el-dialog title="书目详情" :visible.sync="dialogFormVisible" :width="deviceWidth">
      <el-form :model="dialogForm" ref="dialogForm" :label-position="labelPosition">
        <el-form-item label="书号:" :label-width="formLabelWidth">{{dialogForm.isbn}}</el-form-item>
        <el-form-item label="书名:" :label-width="formLabelWidth">{{dialogForm.name}}</el-form-item>
        <el-form-item label="出版社:" :label-width="formLabelWidth">{{dialogForm.press}}</el-form-item>
        <el-form-item label="供应商:" :label-width="formLabelWidth">{{dialogForm.supplier}}</el-form-item>
        <el-form-item label="库存:" :label-width="formLabelWidth">{{dialogForm.stock}}</el-form-item>
        <el-form-item label="库位:" :label-width="formLabelWidth">{{dialogForm.position}}</el-form-item>
        <el-form-item label="价格:" :label-width="formLabelWidth">{{dialogForm.price}}</el-form-item>
        <el-form-item label="折扣:" :label-width="formLabelWidth">{{dialogForm.discount}}</el-form-item>
        <el-form-item label="进价:" :label-width="formLabelWidth">{{dialogForm.purchase_price}}</el-form-item>
        <el-form-item label="订购数量:" :label-width="formLabelWidth" prop="count">
          <el-input-number v-model="dialogForm.count" :min="1" label="订购数量"></el-input-number>
        </el-form-item>
        <el-form-item label="店铺:" :label-width="formLabelWidth" prop="store">
          <el-radio-group v-model="dialogForm.store">
            <el-radio v-for="(item, index) in storeList" :label="index" :key="item">{{item}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="formSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/utils/mixin";
import { commonTitle } from "@/utils/i18n";
import Pagination from "@/components/Pagination";
import { bookDataConfig as dataConfig } from "./config";
import { getList, del, order, imports } from "@/api/book";
import { baseUrl } from "@/utils/request";
import { getToken } from "@/utils/auth";

export default {
  name: "BookList",
  mixins: [mixin],
  components: {
    Pagination,
  },
  data() {
    return {
      dataConfig: dataConfig.fields,
      list: [],
      dialogFormVisible: false,
      dialogForm: dataConfig.dialogForm,
      formLabelWidth: "120px",
      storeList: [],
      submitLoading: false,
      filterForm: dataConfig.filterForm,
      uploadUrl: baseUrl + "/Index/upload",
      uploadHeader: {
        apiAuth: getToken(),
      },
    };
  },
  mounted() {
    this.getList();
    console.log(this.baseUrl);
  },
  computed: {
    deviceWidth() {
      return this.$store.state.app.device !== "mobile" ? "50%" : "90%";
    },
    labelPosition() {
      return this.$store.state.app.device !== "mobile" ? "right" : "top";
    },
  },
  methods: {
    getList() {
      let vm = this;
      vm.listLoading = true;
      const params = {
        ...vm.pagination,
        ...vm.filterForm,
      };
      getList(params)
        .then((response) => {
          vm.list = response.data.list;
          vm.total = response.data.count;
          vm.storeList = response.data.store;
          vm.listLoading = false;
        })
        .catch(() => {
          vm.listLoading = false;
        });
    },
    handleOrder(index, row) {
      let vm = this;
      vm.dialogFormVisible = true;
      vm.dialogForm.isbn = row.isbn;
      vm.dialogForm.name = row.name;
      vm.dialogForm.press = row.press;
      vm.dialogForm.price = row.price;
      vm.dialogForm.supplier = row.supplier.name;
      vm.dialogForm.supplier_id = row.supplier.id;
      vm.dialogForm.stock = row.stock;
      vm.dialogForm.position = row.position;
      vm.dialogForm.discount = row.discount;
      vm.dialogForm.purchase_price = row.purchase_price;
    },
    formSubmit() {
      let vm = this;
      vm.dialogFormVisible = false;
      let params = vm.dialogForm;
      vm.dialogSubmitLoading = true;
      order(params).then((response) => {
        vm.dialogFormVisible = false;
        vm.dialogSubmitLoading = false;
        vm.$refs["dialogForm"].resetFields();
        vm.$message.success(response.msg);
      });
    },
    handleDelete(index, row) {
      let vm = this;
      del(row.id).then((response) => {
        vm.list.splice(index, 1);
        vm.$message.success(response.msg);
      });
    },
    search() {
      this.pagination.page = 1;
      this.getList();
    },
    handleRefresh() {
      this.pagination.page = 1;
      this.filterForm.key = "";
      this.getList();
    },
    handleFileSuccess(response, file, fileList) {
      let vm = this;
      let params = {
        file: response.data.fileName,
        name: file.name,
      }
      if(response.code == 1){
         imports(params).then(res => {
            vm.$message.success(res.msg)
          })
        
      }else{
        vm.$message.error(response.msg)
      }
    },
    commonTitle,
  },
};
</script>